

@set std-date-range {

  :root {
    behavior:none;
    prototype: DateRange url(date-plus.tis);
    flow:horizontal;
    width:max-content;
    border:1dip solid #ccc;
    line-height:1.8em;
  }

  :root > caption {
    flow:horizontal;
    behavior:clickable;
    border-spacing:0.5em;
    padding:0 0.5em;
  }
  
  :root > caption > span { display:block; white-space:nowrap; }

  :root > b {
    behavior:clickable;
    display:block;
    height:*;
    width:2em;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(path:M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z);
    background-size: 1.2em 1.2em;  
    fill: #aaa;      
  }

  :root > popup {
    flow: grid(1 2, 
               3 3);
    border:1dip solid #ccc;
  }

  :root > popup > div {
    width:*;
  }

  :root > popup > div.end {
    border-left:1dip solid #ccc; 
  }

  :root > popup > footer {
    flow:horizontal;
    border-spacing:0.5em;
    padding:0.5em;
    horizontal-align:right;
    border-top:1dip solid #ccc;
  }

  :root:invalid[novalue] > caption {
    color:transparent;
  }

  :root:invalid[novalue] > caption::marker {
    content: parent-attr(novalue);
    size:*;
    color:#aaa;
    text-align:center;
  }

  widget {
    border:none; 
  }

  widget > footer { 
    visibility:none; // no "today" marker
  }

  widget td:checked { // date in range
    foreground-color: rgba(127,148,255,0.25); 
  }

  input|time {
    display:block;
    margin:0.5em *;
  }

}

input[type="date-range"] { style-set:std-date-range; }

